<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Magic</title>
        <c:set var="baseURL" value="${pageContext.servletContext.contextPath}" />
        <link href="${baseURL}/resources/css/magic.css" rel="stylesheet" type="text/css" />
        <link href="${baseURL}/resources/css/theme.css" rel="stylesheet" type="text/css" />
        <link href="${baseURL}/resources/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script src="${baseURL}/resources/scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script src="${baseURL}/resources/scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
        <link href="${baseURL}/resources/css/select2.css" rel="stylesheet" type="text/css" />
        <link href="${baseURL}/resources/css/jquery-ui.css" rel="stylesheet" type="text/css" />
 
        <script src="${baseURL}/resources/scripts/select2.min.js" type="text/javascript"></script>
        <script src="${baseURL}/resources/scripts/jquery.jtable.js" type="text/javascript"></script>
        <script src="${baseURL}/resources/scripts/json2.js" type="text/javascript"></script>
        <link href="${baseURL}/resources/themes/metro/lightgray/jtable.css" rel="stylesheet" type="text/css" />
 
    </head>
    <body>
        <script>
            $(document).ready(function() {
                $('#propertiesTableContainer').jtable({
                    title: 'Properties',
                    sorting: true,
                    selecting: true,
                    multiselect: true,
                    selectingCheckboxes: true,
                    actions: {
                        listAction: '${baseURL}/ui/getAllProperties',
                        createAction: '${baseURL}/ui/addProperty',
                        updateAction: '${baseURL}/ui/updateProperty',
                        deleteAction: '${baseURL}/ui/deleteProperty'
                    },
                    toolbar: {
                    	items: [{
                    		tooltip: 'Delete selected records',
                    		icon: 'resources/themes/metro/delete.png',
                    		text: 'Delete selected records',
                    		click: function() {alert('I don\'t work yet')}
                    	}]
                    },
                    fields: {
                    	key: {
                    		key: true,
                    		list: false
                    	},
                        name: {
                            title: 'Name',
                            width: '20%'
                        },
                        tags: {
                            title: 'Tags',
                            width: '40%',
                            type: 'tags'
                        },
                        value: {
                            title: 'Value',
                            width: '20%'
                        },
                        group: {
                            title: 'Group',
                            width: '20%'
//                             type: 'radiobutton',
//                             options: { '1': 'Public', '2': 'Dan', '3': 'Sean' }
                        }
                    },
                    recordAdded: function(event, data){
                        //after record insertion, reload the records
                        $('#propertiesTableContainer').jtable('load');
                    },
                    recordUpdated: function(event, data){
                        //after record updation, reload the records
                        $('#propertiesTableContainer').jtable('load');
                    }
                });
                $('#propertiesTableContainer').jtable('load');
 
            });    
        </script>
 		<div id="header" style="height:10%;"></div>
        <div id="propertiesTableContainer" style="width:100%;"></div>
    </body>
</html>